<script>
  export default {
    data() {
      return {
        allChest: [
          {
            type: 1,
            score: 20
          },
          {
            type: 2,
            score: 40
          },
          {
            type: 3,
            score: 80
          },
          {
            type: 4,
            score: 160
          }
        ],//所有宝箱
        currentChest: 0,//当前积分
        flagLeftPosition: [
          7.89, 27.63, 53.5, 100
        ],//三个棋子的left位置 因为要与棋子中间为准,所有有偏差(.875/2)/19=2.3%
      }
    },
    computed: {
      /**
       * 宝箱的进度条 返回百分比
       */
      scoreDivWidth() {
        let currentChest = this.currentChest;
        let flagLeftPosition = this.flagLeftPosition;
        let allChest = this.allChest;
        let type = 0;
        if (!currentChest) {
          return 0;
        }
        if (currentChest >= 160) {
          return 100;
        }
        for (let i = 0; i < allChest.length; i++) {
          if (currentChest < allChest[i].score) {
            let lastA, lastB;
            if (i === 0) {
              lastA = 0;
              lastB = 0;
            } else {
              lastA = allChest[i - 1].score;
              lastB = flagLeftPosition[i - 1];
            }
            return ((currentChest - lastA) / (allChest[i].score - lastA)) * (flagLeftPosition[i] - lastB) + lastB
          }
        }
      },
      windowWidth() {
        return this.$store.state.windowWidth
      },
      windowHeight() {
        return this.$store.state.windowHeight
      },
    },
    mounted() {
      this.ajaxAllChests();
      this.ajaxCurrentChest();
    },
    methods: {
      /**
       * 当前分数是否符合这个宝箱的积分
       */
      currentScoreIsQualified(score) {
        return this.currentChest >= score
      },
      /**
       * 点击宝箱  先确认宝箱积分是否满足
       * **/
      clickChest(needScore, type,index,e) {
        var _self = this;
        ajaxCore.ajax(config.szg.getUserJf, null, "POST", {
          "Authorization": getToken()
        }).done((res) => {
          if (res.status == 10001) {
            if (this.currentChest != res.result) {
              layer.msg("当前积分已有变化,2秒后将自动刷新");
              setTimeout(() => {
                window.location.reload();
              }, 2000)
            } else {
              if (this.currentChest >=needScore) {

                ajaxCore.ajax(config.szg.getChestRandom, {type:type}, "POST", {
                  "Authorization": getToken()
                }).done((res)=>{
                  if(res.status==10001&&res.result){
                    //打开小包厢
                    _self.allChest[index].open=true;
                    _self.allChest=JSON.parse(JSON.stringify(_self.allChest));
                    //画二维码
                    $("#code").empty();
                    if(!$("#code")[0]){
                      $('.szg_chest4').after($('<div id="code"></div>'))
                    }

                    var str = toUtf8(res.result);

                    $("#code").qrcode({

//                      render: "table",

                      width: this.windowWidth * .5,

                      height: this.windowWidth * .5,

                      text: str

                    });

                    layer.open({
                      type: 1,
                      content: $("#code"),
                      title: false,
                      shade: false,
                      anim: 5,
                      btn: false,
                      end() {
                        _self.ajaxCurrentChest();

                      }
                    });
                  }
                })

              }
            }
          }
        })
        function toUtf8(str) {

          var out, i, len, c;

          out = "";

          len = str.length;

          for (i = 0; i < len; i++) {

            c = str.charCodeAt(i);

            if ((c >= 0x0001) && (c <= 0x007F)) {

              out += str.charAt(i);

            } else if (c > 0x07FF) {

              out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));

              out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));

              out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));

            } else {

              out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));

              out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));

            }

          }

          return out;

        }

      },
      /**
       * 获取所有宝箱
       */
      ajaxAllChests() {
        ajaxCore.ajax(config.szg.getAllChest, null, "POST", {
          "Authorization": getToken()
        }).done((res) => {
          if (res.status == 10001) {
            let arr = [];
            for (let i = 0; i < res.result.length; i++) {
              arr.push(
                {type: res.result[i].type, score: res.result[i].score}
              )
            }
          }
        })
      },
      /**
       * 获取当前用户积分
       */
      ajaxCurrentChest() {
        return new Promise((resolve, reject) => {
          ajaxCore.ajax(config.szg.getUserJf, null, "POST", {
            "Authorization": getToken()
          }).done((res) => {
            if (res.status == 10001) {
              resolve(res);
              this.currentChest = res.result;
            }
          })
        });

      }
    }
  }
</script>
<template>
  <div class="E1MM_siteMain">
    <img src="../../../../static/staticJC/images/event/lightning.png" class="szg_shandian"/>
    <div class="szg_chests_box">
      <div class="szg_chests_box_line_box">
        <div class="szg_chests_box_line1" :style="{width:scoreDivWidth+'%'}">
          <div class="szg_chests_box_line2">

          </div>
        </div>
      </div>
      <ul class="szg_chests_items">
        <li class="szg_chests_item" :class="['szg_chests_item'+(index+1)]" v-for="(item,index) in allChest"
            v-if="index!=allChest.length-1" @click="clickChest(item.score,item.type,index,$event)">
          <img src="../../../../static/staticJC/images/event/flag.png" alt="小红旗" class="szg_chests_item_qi">
          <div class="szg_chests_item_chest" :class="{'gray':!currentScoreIsQualified(item.score),'open':item.open}"></div>
        </li>
      </ul>
    </div>
    <div class="szg_chest4" @click="clickChest(allChest[allChest.length-1].score,allChest[allChest.length-1].type,allChest.length-1,$event)" :class="{'gray':!currentScoreIsQualified(allChest[allChest.length-1].score),'open':allChest[allChest.length-1].open}"></div>
    <div id="code">

    </div>
  </div>
</template>

